import { Tabs, TabsProps } from '@aws-amplify/ui-react'; import * as React from 'react'; import { TabsPropControlsProps } from './TabsPropControls'; import { demoState } from '@/utils/demoState'; interface UseTabsProps { (initialValues: TabsProps): TabsPropControlsProps; } export const useTabsProps: UseTabsProps = (initialValues) => { const [spacing, setSpacing] = React.useState<TabsProps['spacing']>( initialValues.spacing ); const [justifyContent, setJustifyContent] = React.useState< TabsProps['justifyContent'] >(initialValues.justifyContent); const [indicatorPosition, setIndicatorPosition] = React.useState< TabsProps['indicatorPosition'] >(initialValues.indicatorPosition); const children = initialValues.children; React.useEffect(() => { demoState.set(Tabs.displayName, { spacing, justifyContent, indicatorPosition, children, }); }, [spacing, justifyContent, indicatorPosition, children]); return React.useMemo( () => ({ spacing, setSpacing, children, justifyContent, setJustifyContent, indicatorPosition, setIndicatorPosition, }), [ spacing, setSpacing, children, justifyContent, setJustifyContent, indicatorPosition, setIndicatorPosition, ] ); };